<script setup>
import {useRouter} from "vue-router";

const props = defineProps({
  isFocus: Boolean,
  game: Object
})

// 游戏详情页
const router = useRouter()
const gameDetail = () => {
  router.push(`/store/detail/${props.game.id}`)
}
</script>

<template>
  <div class="game-container" @click="gameDetail">
    <div class="card" :class="{cardOnFocus: isFocus === true, cardLoseFocus: isFocus === false}">
      <img v-img-lazy="game.widerPicture">
      <div class="game-info">
        <div class="left">
          <div class="name">{{ game.chineseName }}</div>
          <div class="issue-date">{{ game.issueDate }}发售</div>
          <div class="category ellipsis">
            <span v-for="item in game.category" :key="item">{{ item }}</span>
          </div>
        </div>
        <div class="right">
          <div class="game-price">
            <template v-if="game.gamePrice.currentPrice === '0.00'">
              免费开玩
            </template>
            <template v-else>
              <template v-if="game.gamePrice.discount === 0">
                ￥{{ game.gamePrice.originPrice }}
              </template>
              <template v-else>
                <div class="discount">
                  <div class="discount-percent">-{{game.gamePrice.discount}}%</div>
                  <div class="discount-price">
                    <span class="discount-origin-price">￥{{ game.gamePrice.originPrice }}</span>
                    <span class="discount-current-price">￥{{ game.gamePrice.currentPrice }}</span>
                  </div>
                </div>
              </template>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.game-container {
  cursor: pointer;
  .card {
    width: 618px;
    display: flex;
    img {
      width: 184px;
      height: 69px;
      object-position: center;
      object-fit: cover;
    }
    .game-info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .left {
        padding: 4px 10px 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
          font-size: 18px;
        }
        .issue-date {
          font-size: 14px;
          color: #758b9d;
        }
        .category {
          height: 20px;
          max-width: 250px;
          line-height: 20px;
          font-size: 12px;
          color: #384959;
          span {
            margin-right: 10px;
          }
        }
      }
      .right {
        display: flex;
        align-items: center;
        .game-price{
          width: 160px;
          padding: 0 10px;
          display: flex;
          font-size: 16px;
          justify-content: end;
          .discount {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .discount-percent {
              margin-right: 10px;
              padding: 0 4px;
              background-color: $discountBackgroundColor;
              color: $discountTextColor;
              text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);
            }
            .discount-price {
              display: flex;
              flex-direction: column;
              align-items: end;
              .discount-origin-price {
                position: relative;
                color: #738895;
                font-size: 13px;
                &:before {
                  content: '';
                  left: 0;
                  right: 0;
                  position: absolute;
                  top: 43%;
                  border-bottom: 1.5px solid #738895;
                  transform: skewY(-8deg);
                  box-shadow: 0 0 2px black;
                }
              }
              .discount-current-price {

              }
            }
          }
        }
      }
    }
  }
  .cardLoseFocus {
    color: #c7d5e0;
    background-color: $decorativeColor;
    transition: all 0.1s;
  }
  .cardOnFocus {
    width: 618px + 14px;
    color: #10101b;
    background: linear-gradient(to right, $contrastingColor1 5%, $contrastingColor2 95%);
    padding-right: 14px;
  }
}
</style>
